<template>
  <a-card :bordered="false" :headStyle="{ padding: '0 15px', border:0}" style="width:100%">
    <p>Disk read rate</p>
    <ve-line
      ref=""
      :data="metricData"
      :settings="hourSettings"
      :extend="chartExtend"
      :colors="hourcolors"
      :judge-width="true"
      height="200px">
    </ve-line>
  </a-card>
</template>

<script>
import { metricHistory } from '@/api/monitor'

export default {
  name: 'DiskReadRate',
  components: {
  },
  data () {
    return {
      hourcolors: ['#4688f1', '#759574', '#ecac6c'],
      hourSettings: {},

      chartExtend: {
        title: {
          x: 'left',
          y: '-5px',
          textStyle: {
            fontSize: 13,
            fontWeight: 'bolder',
            color: '#333' // 主标题文字颜色
          }
        },
        dataZoom: [
          {
            type: 'inside' // 表示内置的鼠标缩放滑动
          }
        ],
        grid: {
          top: '15%',
          left: '1%',
          right: '3%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: {
          axisLine: {
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        series: {
          barWidth: 10,
          symbolSize: 3, // 拐点节点大小
          showSymbol: false // 是否默认显示拐点
        }
      },

      metricData: {
        columns: ['Timestamp'],
        rows: []
      }
    }
  },

  /*
   * 定义父页面(hostDetail.vue)中传递属性
   */
  props: {
    startTime: {
      type: String,
      default: null
    },
    endTime: {
      type: String,
      default: null
    }
  },

  /*
   * 监听startTime字段值是否有变化
   * - 如果有变化，驱动一次历史数据取值
   */
  watch: {
    startTime: {
      deep: true,
      handler: function (newVal) {
        console.log('startTime:', newVal)
        this.metricData.rows = []
        this.getDiskReadRate()
      }
    }
  },

  created () {
  },

  mounted () {
    // 生产用: 发起API请求(最近四小时监控数据)
    this.getDiskReadRate()
  },

  methods: {
    async getDiskReadRate () {
      this.metrics = await this.getMetricHistory()
      const _this = this // 否则foreach内提示异常

      this.metrics.item_names.forEach(function (item) {
        _this.metricData.columns.push(item)
      })

      this.metrics.item_values.forEach(function (item) {
        _this.metricData.rows.push(
          item
        )
      })

      // 返回数据集合可能未排序
      this.metricData.rows.sort(function (a, b) {
          return Date.parse(a['Timestamp']) - Date.parse(b['Timestamp'])
      })
    },

    getMetricHistory () {
      const params = {
        host_id: parseInt(this.$route.query.host_id),
        item_key: 'vfs.dev.read.rate',
        item_type: 0,
        is_multi: true,

        // 时间周期
        start_time: this.startTime,
        end_time: this.endTime
      }

      return new Promise((resolve, reject) => {
        metricHistory(params).then(
          (res) => {
            resolve(res)
          },
          (error) => {
            console.log(error)
            resolve(error)
          }
        )
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .transcount-left{
    width: 100%;
    padding:10px;
    margin-right: 20px;
    float: left;
    p{
      font-size: 13px;
    }
    h3{
      font-size: 30px;
      color: #00A8FE;
    }
    .compared{
      list-style: none;
      padding: 0;
      margin: 0;
      li{
        float: left;
        width: 50%;
        span{
          font-size: 15px;
          .anticon-rise{
            color: #fa4145;
            font-size: 17px;
          }
          .anticon-fall{
            color: #5dd48c;
            font-size: 17px;
          }
        }
        .rise{
          color:#fa4145;
        }
        .fall{
          color:#5dd48c;
        }
      }
    }
  }
</style>
